<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">
    <title>佩奇说说</title>
    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/jumbotron.css" rel="stylesheet">
    <style>
        #error { 
            display: none;
        }
        .grid {
            height: 200px;
        }
        .avatar{
            border-radius: 50%;
        }
        #Allshuoshuo {
            height: 500px;
        }
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/underscore-noflect.js"></script>
  </head>
  <body>
    <% include header.ejs %>
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <% if(!login){ %>
        <!-- 没有登录的时候显示登录提示 -->
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
              <h1>欢迎您</h1>
              <p>猪猪说说是一个基于 Nodejs 的微博系统</p>
              <p><a class="btn btn-primary btn-lg" href="#" role="button">注册</a></p>
          </div>
          <div class="col-lg-6">
              <p>已有账号登录</p>
              <form>
                  <div class="form-group">
                      <label for="Username">用户名</label>
                      <input type="text" class="form-control" id="Username" placeholder="用户名，可以是中文，不能与别人重复">
                  </div>
                  <div class="form-group">
                      <label for="Password">密码</label>
                      <input type="password" class="form-control" id="Password" placeholder="密码，至少六位">
                  </div>
                  <button type="button" id="login" class="btn btn-success">登录</button>
              </form>
              <div class="alert alert-danger" role="alert" id="error">                  
          </div>
        </div>
      </div>
      <%}else{%>
        <!-- 登录之后显示发言框 -->
        <div class="container">
            <div class="row">
                <div class="col-lg-1">
                    <a href="/Setavatar"><img src="/avatar/<%=avatar%>" class="avatar" alt=""></a>
                </div>
                <div class="col-lg-6 col-lg-offset-1">
                    <p><%= username%></p>   
                    <textarea name="content" id="content" cols="80" rows="4"></textarea>   
                    <button type="button" id="send" class="btn btn-success">发表说说</button>
                </div>
            </div>
        </div>
      <%}%>
    </div>

    <div class="container">
        <!-- 分页条 -->
        <nav>
            <ul class="pagination">
                
            </ul>
        </nav>
        <script type="text/javascript">
            $.get("/Allamount",function(result){
                var amount = parseInt(result);
                pageamount = Math.ceil(amount / 5);         // 总页数
                for(var i = 0;i < pageamount;i++){
                    $(".pagination").append("<li><a href='javascript:void(0);'>" + i + "</a></li>");
                }
                $(".pagination li:first").addClass("active");
                $(".pagination li").click(function(){
                    var page = $(this).index();
                    getPage(page);
                    $(this).addClass("active").siblings().removeClass("active");
                });
            });
        </script>
        <!-- Example row of columns -->
        <div class="row" id="Allshuoshuo">
            
        </div>
        <hr>
        <footer>
            <p>&meoga; 2018 Company, Inc.</p>
        </footer>
    </div> <!-- /container -->

    <script type="text/template" id="model">
      <div class="col-md-4 grid">
          <h2><img width="40" class="avatar" src="/avatar/{{=avatar}}">{{=username}}说：</h2>
          <p>{{=content}}</p>
          <p>{{=datetime}}</p>
          <p><a class="btn btn-default" href="#" role="button">查看详情</a></p>
        </div>
    </script>

    <script type="text/javascript">
        var $Allshuoshuo = $("#Allshuoshuo");
        var compiled = _.template($("#model").html())     // 得到模板 
        getPage(0);
        function getPage(page){
            $("#Allshuoshuo").html("");
            $.ajax({             // Ajax请求分页的说说信息
                "url" : "/Allshuoshuo?page=" + page,
                "type" : "get",
                "success" : function(result){
                    iterator(0);        
                    // console.log(Array.isArray(result));
                    function iterator(i){         // chrome浏览器不给同步这样请求破坏用户体验，所以使用迭代器   
                        if(i == result.length){
                            return;     // 停止迭代
                        }
                        $.get("/userinfo?username=" + result[i].username,function(result2){
                                // 修改字典，给字典增加一项头像
                                result[i].avatar = result2.avatar;
                                console.log(result[i].avatar)
                                var htmlstring = compiled(result[i]);
                                $("#Allshuoshuo").append($(htmlstring));
                                iterator(i+1);
                            }
                        )
                    }
                }
            });
        }
            
        $("input").focus(function(){                // 失去焦点的时候去掉错误框
            $("#error").fadeOut();
        })
        $("#login").click(function(){
            $.post("/dologin",{
            "username" : $("#Username").val(),
            "password" : $("#Password").val()
            },function(result){
                if(result == "1"){
                    window.location ="/";
                }else if (result == "-1"){      // 用户名被占用
                    $("#error").fadeIn();
                    $("#error").html("用户名不存在");
                }else if(result == "-2"){
                    $("#error").fadeIn();
                    $("#error").html("密码错误！");
                }
            });
        });

        $("#send").click(function(){       // 点击发布之后做的事情
              $.post("/post",{
              "content" : $("#content").val()
              },function(result){
                  if(result == "1"){
                      alert("发布成功");
                  }else{
                    alert("发布失败，丑八怪");
                  }
              });
          });
          
  </script>
  </body>
</html>
